<template>
  <div class="container">
    <!-- 面包屑导航 -->
    <div class="breadcrumb">
      <el-breadcrumb separator="">
        <el-breadcrumb-item>
          <div class="div1">出库管理</div>
        </el-breadcrumb-item>
        <el-breadcrumb-item
          :to="{
            name: 'addInternal',
            query: {
              totalPrice: this.totalPrice,
              receivedMoney: this.receivedMoney,
              tableData: this.orderDetailList,
              internalex: this.basic,
            },
          }"
        >
          <div class="div3">添加内部出库</div>
        </el-breadcrumb-item>
        <el-breadcrumb-item>
          <div class="div2">订单审核</div>
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!-- 面包屑导航 -->
    <!-- 基本信息 -->
    <div class="basic">
      <p class="header">基本信息</p>
      <el-form
        ref="basic"
        :inline="true"
        :model="basic"
        :rules="rules"
        label-width="80px"
      >
        <el-form-item label="收货人" prop="name">
          <el-input
            v-model="basic.name"
            placeholder="请输入收货人姓名"
          ></el-input>
        </el-form-item>

        <el-form-item label="联系电话" prop="phone">
          <el-input
            v-model="basic.phone"
            placeholder="请输入联系电话"
          ></el-input>
        </el-form-item>

        <el-form-item label="部门选择" prop="orgName">
          <div class="selectTree">
              <treeselect
                :options="optionsTeam"
                v-model="basic.orgName"
                search-nested
                :normalizer="normalizer"
                noResultsText="未找到"
                placeholder="请选择"
              >
              </treeselect>
            </div>
        </el-form-item>

        <el-form-item label="出库类型" prop="type">
          <el-select
            v-model="basic.type"
            placeholder="请选择出库类型"
            filterable
            clearable
          >
            <el-option
              v-for="items in brandselect"
              :key="items.id"
              :label="items.deliveryName"
              :value="items.id"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="地区" required>
          <levelAddr
            class="addressContent"
            :province="basic.province"
            :city="basic.city"
            :area="basic.area"
            @updateprovice="getAddrData"
            @updatecity="getCity"
            @updatearea="getArea"
          ></levelAddr>
        </el-form-item>

        <el-form-item label="详细地址" prop="detail">
          <div class="length">
            <el-input
              v-model="basic.detail"
              placeholder="请输入详细地址"
            ></el-input>
          </div>
        </el-form-item>
      </el-form>
    </div>
    <!-- 基本信息 -->
    <div class="orderBox">
      <div class="order">
        <p class="header" style="background: #fff; padding: 10px">订单商品</p>
        <el-table :data="orderDetailList" style="width: 100%">
          <el-table-column label="商品名称">
            <template slot-scope="scope">
               <div style="display:flex">{{ scope.row.title || scope.row.name }}<span class="gift" v-if="scope.row.goodsType=='赠品'" >赠品</span></div>
            </template>
          </el-table-column>
          <el-table-column label="商品数量">
            <template slot-scope="scope">
              <!-- <div class="numer">
                <el-input
                  v-model="scope.row.number"
                  :value="scope.row.number"
                  @change="changeCount(scope.row, scope.$index)"
                  :min="1"
                  :max="scope.row.number"
                >
                  <el-button
                    slot="prepend"
                    @click="changeQuantity(scope.row, -1, scope.$index)"
                    ><i class="el-icon-minus"></i
                  ></el-button>
                  <el-button
                    slot="append"
                    @click="changeQuantity(scope.row, 1, scope.$index)"
                    ><i class="el-icon-plus"></i
                  ></el-button>
                </el-input>
              </div> -->
              <p  style="color: #999999">x{{ scope.row.quantity }}</p>
            </template>
          </el-table-column>
          <el-table-column label="商品单价">
            <template slot-scope="scope">
              <div class="sellPrice">
                <!-- <el-input
                  v-model="scope.row.retailPrice"
                  :value="scope.row.retailPrice"
                  @change="changePrice(scope.row, scope.$index)"
                ></el-input> -->
                ￥{{scope.row.retailPrice}}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="brandName" label="商品品牌"></el-table-column>
          <el-table-column prop="categoryName" label="商品分类"></el-table-column>
          <el-table-column
            label="商品规格"
          >
          <template slot-scope="scope">
          <p v-if="scope.row.specTitle" v-html="scope.row.specTitle"></p>
          <p v-else v-html="scope.row.specification"></p>
          </template>
        </el-table-column>
          <el-table-column  label="商品小计">
             <template slot-scope="scope">
              <p>￥{{ parseFloat(scope.row.quantity * scope.row.retailPrice).toFixed(2) }}</p>
            </template>
          </el-table-column>
        </el-table>
        <!-- <el-table :data="tableData.gifts" style="width: 100%">
          <el-table-column label="赠品名称">
            <template slot-scope="scope">
              <p>{{ scope.row.title }}</p>
            </template>
          </el-table-column>
          <el-table-column label="赠品数量">
            <template slot-scope="scope">
              <div class="numer">
                <el-input
                  v-model="scope.row.number"
                  :value="scope.row.number"
                  @change="changeCountZp(scope.row, scope.$index)"
                  :min="1"
                  :max="scope.row.number"
                >
                  <el-button
                    slot="prepend"
                    @click="changeQuantityZp(scope.row, -1, scope.$index)"
                    ><i class="el-icon-minus"></i
                  ></el-button>
                  <el-button
                    slot="append"
                    @click="changeQuantityZp(scope.row, 1, scope.$index)"
                    ><i class="el-icon-plus"></i
                  ></el-button>
                </el-input>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="赠品单价">
            <template slot-scope="scope">
              <div class="sellPrice">
                <el-input
                  v-model="scope.row.sellPrice"
                  :value="scope.row.sellPrice"
                  @change="changePriceZp(scope.row, scope.$index)"
                ></el-input>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="brandId" label="赠品品牌"></el-table-column>
          <el-table-column prop="categoryId" label="赠品分类"></el-table-column>
          <el-table-column
            prop="specificationName"
            label="赠品规格"
          ></el-table-column>
          <el-table-column prop="total" label="赠品小计"></el-table-column>
        </el-table> -->
      </div>
      <div class="page1">
        <p>
          <span>总计：共 {{ totalNumber }} 件 </span>
        </p>
        <p>
          <span>总价:</span>
          <el-input :disabled="true" v-model="totalPrice" placeholder=""></el-input>
        </p>
        <p>
          <span>已收款:</span>
          <el-input :disabled="true" v-model="receivedMoney" placeholder=""></el-input>
        </p>
        <!-- <p>
          <span style="color: #999">原总价：{{ origTotal }}</span>
        </p> -->
        <p>
          <el-button type="primary" @click="toReviewOrder('basic')"
            >确定订单</el-button
          >
        </p>
      </div>
    </div>
    <!-- 订单备注 -->
    <div class="orderNotes">
      <div class="header">
        <span>订单备注</span>
      </div>
      <div class="notes">
        <el-input
          type="textarea"
          disabled
          v-model="basic.textarea"
          placeholder="备注"
        ></el-input>
      </div>
    </div>
  </div>
</template>

<script>
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import levelAddr from '@/components/levelAddr'
export default {
  components: { levelAddr, Treeselect },
  data () {
    return {

      normalizer (node) {
        return {
          id: node.orgCode,
          label: node.orgName,
          children: node.children
        }
      },
      receivedMoney: '', //
      totalPrice: '', //
      totalNumber: '',
      pickerOptions: {
        shortcuts: [
          {
            text: '此刻',
            onClick (picker) {
              picker.$emit('pick', new Date())
            }
          }
        ],
        disabledDate (time) {
          return time.getTime() > Date.now() - 8.64e6
        }
      },
      basic: {
        name: '',
        ditchTime: '',
        phone: '',
        orgName: null
      },
      rules: {
        name: [
          {
            required: true,
            message: '请输入申请人姓名',
            trigger: 'blur'
          }
        ],
        ditchTime: [
          {
            required: true,
            message: '请输入申请时间',
            trigger: 'blur'
          }
        ],
        phone: [
          {
            required: true,
            message: '请输入申请人联系电话',
            trigger: 'blur'
          }
        ],
        type: [
          {
            required: true,
            message: '请输入出库类型',
            trigger: 'blur'
          }
        ]
      },
      goods: {
        name: '',
        brand: '',
        category: [],
        code: ''
      },
      // activeName:"goods",
      total: 0,
      orderDetailList: [],

      brandselect: [],
      options: [],
      optionsTeam: [],
      props: {
        label: 'orgName',
        value: 'id',
        children: 'children'
      },
      // addressId:"",
      orderNumber: 0,
      origTotal: 0, // 原价
      arry: [],
      giftL: [],
      levelList: []
    }
  },
  created () {
    this.receivedMoney = this.$route.query.receivedMoney
    this.department()
    this.basic = JSON.parse(sessionStorage.getItem('internalex'))
    this.orderDetailList = JSON.parse(sessionStorage.getItem('orderDetailList'))
    this.totalPrice = this.$route.query.totalPrice
    this.totalNumber = this.$route.query.totalNumber
    console.log(this.$route.query)
    // this.tableData.gifts = JSON.parse(sessionStorage.getItem('tableZp'))
    // if (!this.is_null(this.tableData.goods)) {
    //   for (let i = 0; i < this.tableData.goods.length; i++) {
    //     this.arry.push(this.tableData.goods[i].id)
    //   }
    //   this.calculation()
    //   this.total = this.$route.query.total
    // } else {
    //   this.tableData.goods = []
    // }
    // if (!this.is_null(this.tableData.gifts)) {
    //   for (let i = 0; i < this.tableData.gifts.length; i++) {
    //     this.giftL.push(this.tableData.gifts[i].id)
    //   }
    //   this.calculation()
    //   this.total = this.$route.query.total
    // } else {
    //   this.tableData.gifts = []
    // }
    this.brandSelectBox()
    this.brandSelect()
  },
  methods: {
    getMenuBtnList (menuTreeList, menuList, code) {
      for (const item of menuTreeList) {
        if (item.orgCode == code) {
          menuList.push({
            lable: item.orgName,
            orgCode: item.orgCode,
            type: item.type
          })
        } else if (item.children && item.children.length > 0) {
          this.getMenuBtnList(item.children, menuList, code)
        }
      }
    },
    getAddrData (val) {
      this.basic.province = val
      this.basic.city = ''
      this.basic.area = ''
    },
    getCity (val) {
      this.basic.city = val
      this.basic.area = ''
    },
    getArea (val) {
      this.basic.area = val
    },
    is_null (content) {
      if (
        content + '' != '' &&
        content + '' != 'undefined' &&
        content + '' != 'null' &&
        content + '' != '请选择'
      ) {
        return false
      } else {
        return true
      }
    },
    // 部门选择列表
    department () {
      this.axios
        .post(
          '/sys/v1/org/tree/select',
          {
            request: {
              orgName: '',
              orgType: ''
            },
            version: ''
          },
          {
            headers: {
              isLoading: false
            }
          }
        )
        .then((res) => {
          if (res.code == 0) {
            this.optionsTeam = res.data
          } else {
            this.$message.error(res.message)
          }
        })
    },
    //* * 品牌下拉 **//
    brandSelectBox () {
      this.axios
        .post('/order/v1/internal/delivery/config/list', {
          request: {
            deliveryName: '',
            orgCode: sessionStorage.getItem('orgCode'),
            pageNo: 1,
            pageSize: 999
          }
        }, {
          headers: {
            isLoading: false
          }
        })
        .then((res) => {
          if (res.code == 0) {
            this.brandselect = res.data.list
          } else {
            this.$message.error(res.message)
          }
        })
    },
    //* * 品牌下拉 **//
    // 分类下拉框
    brandSelect () {
      this.axios
        .get('/order/comm/commodity/selectBrand', {
          headers: {
            isLoading: false
          }
        })
        .then((res) => {
          if (res.code == 0) {
            this.options = res.data
          } else {
            this.$message.error(res.message)
          }
        })
    },
    // 加减号
    changeQuantity (row, type, index) {
      if (type > 0) {
        row.number++
      } else {
        row.number--
        row.number > 1 ? row.number : (row.number = 1)
      }
      // this.changeCount(row,type,index);
      this.calculation()
      this.$set(this.tableData.goods, index, {
        brandId: row.brandId,
        typeId: row.typeId,
        createdTime: row.createdTime,
        commodityId: row.id ? row.id : row.commodityId,
        number: row.number,
        sellPrice: row.sellPrice,
        specificationName: row.specificationName,
        title: row.title,
        total: row.number * row.sellPrice
      })
      this.tableData.goods[index].number = row.number
      // console.log(this.tableData[index].number+"修改后的数量")
    },
    changeQuantityZp (row, type, index) {
      if (type > 0) {
        row.number++
      } else {
        row.number--
        row.number > 1 ? row.number : (row.number = 1)
      }
      // this.changeCount(row);
      this.calculation()
      // this.tableData.splice(index,1)
      this.$set(this.tableData.gifts, index, {
        createdTime: row.createdTime,
        complimentaryId: row.id ? row.id : row.complimentaryId,
        number: row.number,
        sellPrice: row.sellPrice,
        specificationName: row.specificationName,
        title: row.title,
        total: parseFloat(row.number * row.sellPrice).toFixed(2),
        brandId: row.brandId,
        categoryId: row.categoryId
      })
    },
    // 数量文本框值改变
    changeCount (row, index) {
      if (
        row.number == null ||
        row.number == '' ||
        (row.number != 'number' && isNaN(row.number))
      ) {
        row.number = 1
      } else if (row.number <= 1) {
        row.number = 1
        this.$message({
          message: '已经减到最低了哦',
          type: 'warning'
        })
      }
      this.$set(this.tableData.goods, index, {
        createdTime: row.createdTime,
        commodityId: row.id ? row.id : row.commodityId,
        number: row.number,
        sellPrice: row.sellPrice,
        specificationName: row.specificationName,
        title: row.title,
        total: parseFloat(row.number * row.sellPrice),
        brandId: row.brandId,
        typeId: row.typeId
      })
      this.tableData.goods[index].number = row.number
      this.calculation()
    },
    changeCountZp (row, index) {
      if (
        row.number == null ||
        row.number == '' ||
        (row.number != 'number' && isNaN(row.number))
      ) {
        row.number = 1
      } else if (row.number <= 1) {
        row.number = 1
        this.$message({
          message: '已经减到最低了哦',
          type: 'warning'
        })
      }
      this.$set(this.tableData.gifts, index, {
        createdTime: row.createdTime,
        id: row.id,
        number: row.number,
        sellPrice: row.sellPrice,
        specificationName: row.specificationName,
        title: row.title,
        total: parseFloat(row.number * row.sellPrice).toFixed(2),
        brandId: row.brandId,
        categoryId: row.categoryId
      })
      this.calculation()
    },
    /** 修改商品的单价**/
    changePrice (row, index) {
      if (
        row.sellPrice == null ||
        row.sellPrice == '' ||
        (row.sellPrice != 'number' && isNaN(row.sellPrice))
      ) {
        this.$message.warning('单价输入有问题')
        row.sellPrice = 0
      } else {
        this.$set(this.tableData.goods, index, {
          createdTime: row.createdTime,
          commodityId: row.id ? row.id : row.commodityId,
          number: row.number,
          sellPrice: row.sellPrice,
          specificationName: row.specificationName,
          title: row.title,
          total: Number(row.number) * Number(row.sellPrice),
          brandId: row.brandId,
          typeId: row.typeId
        })
        this.calculation()
      }
    },
    /** 修改赠品的单价**/
    changePriceZp (row, index) {
      if (!this.is_null(row.sellPrice)) {
        this.$set(this.tableData.gifts, index, {
          createdTime: row.createdTime,
          complimentaryId: row.id ? row.id : row.complimentaryId,
          number: row.number,
          sellPrice: row.sellPrice,
          specificationName: row.specificationName,
          title: row.title,
          total: parseFloat(Number(row.number) * Number(row.sellPrice)).toFixed(
            2
          ),
          brandId: row.brandId,
          categoryId: row.categoryId
        })
      } else {
        this.$message.warning('单价不能为空')
      }
      this.calculation()
    },
    /** 修改商品的单价**/
    // 计算价格--公共调用 总价，总数量
    calculation () {
      let numb = 0 // 接收商品数量
      let price = 0
      for (let i = 0; i < this.tableData.goods.length; i++) {
        numb += Number(this.tableData.goods[i].number)
        price +=
          Number(this.tableData.goods[i].number * this.tableData.goods[i].sellPrice)
      }
      for (let i = 0; i < this.tableData.gifts.length; i++) {
        numb += Number(this.tableData.gifts[i].number)
        price +=
          Number(this.tableData.gifts[i].number * this.tableData.gifts[i].sellPrice)
      }
      this.orderNumber = parseInt(numb)
      this.origTotal = price
      this.total = this.origTotal
      // this.receivedMoney = price;
    },
    toReviewOrder (basic) {
      this.$refs[basic].validate((valid) => {
        if (valid) {
          if (this.is_null(this.orderDetailList)) {
            this.$message.warning('未选择下单商品')
          } else {
            let addr = ''
            if (this.basic.province) {
              addr += this.basic.province
            }
            if (this.basic.city) {
              addr += this.basic.city
            }
            if (this.basic.area) {
              addr += this.basic.area
            }
            if (!addr.length || addr.indexOf('null') != -1) {
              this.$message.warning('请选择正确的地址')
              return
            }
            let url = ''
            if (this.$route.query.orderId) {
              url = 'order/v1/internal/interiorOrder/updateAndReopenInteriorOrder'
              this.orderDetailList.forEach(i => {
                delete i.createdTime
              })
              // this.tableData.gifts.forEach(i => {
              //   delete i.createdTime
              // })
            } else {
              url = 'order/v1/internal/interiorOrder/addInteriorOrder'
            }
            const newArray = []
            this.getMenuBtnList(this.optionsTeam, newArray, this.basic.orgName)
            this.axios
              .post(url, {
                address: addr, // 收货地址
                addressDetails: this.basic.detail, // 地址详情	string
                //   addressPhone: this.basic.phone, //收货人电话	string
                anew: this.$route.query.type, // 初始开单1.重开2.	string
                awaitIncomeMoney: this.totalPrice - Number(this.receivedMoney), // 代收金额	number
                charge: 0, // 运费	number

                city: this.basic.city, // 市级	string

                comment: this.basic.textarea, // 备注	string

                consignee: this.basic.name, // 收货人	string

                consigneeDepaCode: newArray.length ? newArray[0].orgCode : '', // 收货人部门编码	string

                consigneeDepaName: newArray.length ? newArray[0].lable : '', // 收货人部门名称	string

                money: this.totalPrice, // 应付金额	number
                orderId: this.$route.query.orderId,

                orderCommodityAdds: this.orderDetailList, // 商品
                //   orderId: "", //订单号(修改时需要传,初始添加请忽略)

                pieceNumber: this.totalNumber, // 总计	number

                province: this.basic.province, // 省级	string

                receivedMoney: Number(this.receivedMoney), // 收款金额	number

                receivingPhone: this.basic.phone, // 收货电话	string

                region: this.basic.area, // 地区	string

                total: this.totalPrice, // 商品总价	number

                typeId: this.basic.type // 订单内部出库类型id	string
              })
              .then((res) => {
                if (res.code == 0) {
                  if (this.$route.query.orderId) {
                    this.$message.success('修改成功')
                  } else {
                    this.$message.success('添加成功')
                  }
                  if (!this.is_null(this.receivedMoney)) {
                    this.$router.push({
                      name: 'InternalList'
                    })
                    sessionStorage.removeItem('internalex')
                    sessionStorage.removeItem('orderDetailList')
                  } else {
                    this.$message.warning('已收款金额不能为空')
                  }
                } else {
                  this.$message.error(res.message)
                }
              })
          }
        } else {
          this.$message.warning('申请人信息未填写完整')
          return false
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.div1 {
  margin-left: -16px;
  background: url(../../../../assets/breadcrumb2.png);
  width: 120px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  color: #2d7edf;
}

.div2 {
  margin-left: -16px;
  background: url(../../../../assets/breadcrumb1.png);
  width: 120px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  color: #fff;
}

.div3 {
  margin-left: -8px;
  background: url(../../../../assets/breadcrumb3.png);
  width: 120px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  color: #2d7edf;
}

/deep/.el-form--inline .el-form-item {
  margin-right: 0px;
  margin-bottom: 15px;
  vertical-align: top;
  margin-right: 5px;
}
.col {
  margin-top: 10px;
}

.selectGoods {
  background: #fff;
  padding: 10px;
}

.header {
  font-size: 16px;
  color: #2d7edf;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

.search {
  width: 90%;
  margin: 0 auto;
  margin-top: 20px;
}

.sellPrice {
  /deep/.el-input__inner {
    text-align: center;
    width: 100px;
    height: 30px;
    line-height: 30px;
  }
}

/deep/.el-input__inner {
  // width:200px;
  height: 30px;
  line-height: 30px;
}

/deep/.el-button {
  padding: 8px 14px;
  margin-left: 30px;
}

/deep/.el-table td,
.el-table th.is-leaf {
  text-align: center;
}

/deep/.el-table__row:hover {
  color: #2d7edf;
}

/deep/.el-table th > .cell {
  text-align: center;
  color: #2d7edf;
}

.list {
  border-top: 1px solid #eee;
  padding-top: 10px;
}

.basic {
  background: #fff;
  padding: 10px;
  margin-bottom: 10px;
  /deep/.el-cascader .el-input .el-input__inner {
    width: 400px;
  }
}

.page {
  margin-top: 10px;
  text-align: right;

  span {
    font-size: 14px;
    color: #666;
    display: inline-block;
    margin-left: 10px;
  }

  .el-pagination {
    display: inline-block;
    vertical-align: middle;
  }
}

.specify {
  // margin-top:20px;
  background: #fff;
  padding: 10px;
  position: relative;
  // padding-bottom:50px;
}

.box {
  position: relative;
}

/deep/.el-tabs__header {
  margin-bottom: 0;
}

/deep/.el-tabs__nav-scroll {
  padding-left: 10px;
  overflow: hidden;
  background: #fff;
}

.orderBox {
  position: relative;
  margin-top: 20px;
  padding-bottom: 10px;

  .page1 {
    margin-top: 10px;
    background: #fff;
    padding: 10px;
    text-align: right;

    p {
      display: inline-block;
      vertical-align: middle;
      text-align: center;
    }

    /deep/ .el-input {
      display: inline-block;
      vertical-align: middle;
      width: 120px;
    }

    /deep/ .el-input__inner {
      width: 90px;
      color: #2d7edf;
    }

    span {
      font-size: 14px;
      color: #2d7edf;
      display: inline-block;
      margin-left: 10px;
      vertical-align: middle;
    }
  }
}

.numer {
  /deep/.el-button {
    padding: 5px;
    margin: 0;
    background: #fff;
    border: 1px solid transparent;
    height: 23px;
    font-size: 10px;
    // width:30px;
    border-radius: 0;
  }

  /deep/.el-input-group__prepend {
    padding: 0;
    border-radius: 0;
    border: 1px solid transparent;
  }

  /deep/ .el-input-group {
    width: 80px;
  }

  /deep/.el-input-group__append {
    padding: 0;
    border-radius: 0;
    border: 1px solid transparent;
    // background: #fff;
  }

  /deep/.el-input__inner {
    width: 40px;
    text-align: center;
    padding: 0;
    margin: 0 5px;
    height: 25px;
    line-height: 25px;
  }
}

.orderNotes {
  padding: 10px;
  background: #fff;
  margin-bottom: 10px;
}

.notes {
  p {
    margin-top: 10px;
    display: inline-block;
    margin-right: 10px;
    position: relative;
  }

  span {
    display: block;
    width: 18px;
    height: 18px;
    line-height: 20px;
    text-align: center;
    font-size: 13px;
    color: #fff;
    background: #409eff;
    position: absolute;
    top: -5px;
    right: -6px;
    border-radius: 50%;
  }

  img {
    width: 100px;
    height: 100px;
  }
}

.headerOrder {
  font-size: 16px;
  color: #2d7edf;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
}
.selectTree {
  width: 250px;
  display: inline-block;
  vertical-align: middle;
  margin-right: 10px;
}
/deep/.vue-treeselect {
  height: 28px;
}
/deep/.vue-treeselect--searchable .vue-treeselect__input-container {
  height: 28px;
  line-height: 28px;
  width: 100%;
}
/deep/.vue-treeselect__single-value {
  font-size: 14px;
  line-height: 28px;
}
/deep/.vue-treeselect__menu-container {
  font-size: 15px;
}
/deep/.vue-treeselect__multi-value-item {
  height: 20px;
  line-height: 20px;
  padding: 0;
}
/deep/.vue-treeselect__input {
  height: 26px;
  line-height: 26px;
  outline: none;
  border: none;
  padding: 0;
}
/deep/.vue-treeselect__placeholder {
  font-size: 10px;
  line-height: 28px;
}
/deep/.vue-treeselect--has-value .vue-treeselect__multi-value {
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/deep/.vue-treeselect__control {
  height: 28px;
}
.gift {
  display: inline-block;
  text-align: center;
  width: 54px;
  height: 24px;
  background: #feebeb;
  border-radius: 4px;
  margin-left: 10px;
  font-size: 14px;
  font-weight: 400;
  color: #F33F3F;
  line-height: 23px;
  box-sizing: border-box;
}
:deep(.orderBox .el-table th > .cell){
  text-align: center;
}
</style>
